<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="../favicon.ico" />
<title>Burning ropes</title>
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="../bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="../header/header.css" />
<link rel="stylesheet" type="text/css" href="ropes.css" />
</head>
<body>
	<div class="container">
		<nav class="navbar aenigma-header" role="navigation">
			<div class="aenigma-header-left">
				<table>
					<tr>
						<td><a href="../menu/index.html"><img alt="Aenigmates" src="../back.png" class="img-responsive back"></a></td>
						<td><a href="../menu/index.html"><img alt="Aenigmates" src="../logo_aenigmates.jpg"
								class="img-responsive logo"></a></td>
					</tr>
				</table>
			</div>
			<div class=" aenigma-header-right">
				<div class="dashed  dashed-top"></div>
				<div class="aenigma-title">Burning ropes</div>
				<div class="aenigma-level">Level 11</div>
				<div class="dashed"></div>
			</div>
			<div class="clear"></div>
			<hr />
		</nav>

		<div class="page">
			<div class="button-bar">
				<span class="button button-fire"></span><span class="button button-play"></span><span class="button button-reset"></span><span
					class="button button-help"></span>
			</div>
			<hr />
			<div class="ropes-panel">
				<div class="rope rope1">
					<div class="rope-ashes rope-ashes-top">
						<img src="rope-ashes.png"></img>
					</div>
					<div class="rope-ashes rope-ashes-bottom">
						<img src="rope-ashes.png"></img>
					</div>
				</div>
				<div class="rope rope2">
					<div class="rope-ashes rope-ashes-top">
						<img src="rope-ashes.png"></img>
					</div>
					<div class="rope-ashes rope-ashes-bottom">
						<img src="rope-ashes.png"></img>
					</div>
				</div>
				<canvas class="timer" width="60px" height="60px"></canvas>
				<div class="rope-fire rope1-top-fire"></div>
				<div class="rope-fire rope1-bottom-fire"></div>
				<div class="rope-fire rope2-top-fire"></div>
				<div class="rope-fire rope2-bottom-fire"></div>
			</div>
		</div>

	</div>

	<script src="ropes.js"></script>
	<script src="../jquery/jquery-2.0.3.min.js"></script>
	<script src="../storage/jquery.json-2.4.min.js"></script>
	<script src="../storage/jstorage.min.js"></script>
	<script src="../storage/aestorage.js"></script>
	<script src="ropesView.js"></script>
	<script src="../bootstrap/js/bootstrap.min.js"></script>

	<script>
		$(function() {
			var controller = new RopeController(new RopesView({
				page : $('.page'),
				fireButton : $('.button-fire'),
				playButton : $('.button-play'),
				resetButton : $('.button-reset'),
				helpButton : $('.button-help'),
				ropes : [ {
					jqRope : $('.rope1'),
					jqTop : $('.rope1-top-fire'),
					jqBottom : $('.rope1-bottom-fire'),
					jqAshTop : $('.rope1 .rope-ashes-top'),
					jqAshBottom : $('.rope1 .rope-ashes-bottom')
				}, {
					jqRope : $('.rope2'),
					jqTop : $('.rope2-top-fire'),
					jqBottom : $('.rope2-bottom-fire'),
					jqAshTop : $('.rope2 .rope-ashes-top'),
					jqAshBottom : $('.rope2 .rope-ashes-bottom')
				} ],
				jqTimer : $('.timer')
			}));
			controller.startup();
		});
	</script>

</body>
</html>